<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
	var unitId = "${food.unitId}";
	var classificationId = "${food.classificationId}";
	var foodMaterialList = '${foodMaterialList}';
</script>

<script type="text/javascript" src="<%=basePath%>js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/vue.min.js"></script>
<link rel="stylesheet" href="<%=basePath%>css/layui/css/layui.css">
<script type="text/javascript"
	src="<%=basePath%>js/editFood/editFood.js"></script>
<script type="text/javascript" src="<%=basePath%>js/BaseUtile.js"></script>

<title>Insert title here</title>

</head>
<style>
[v-cloak] {
	display: none;
}
</style>

<body style="padding: 5%">

	<input id="materialList" style="display: none" />


	<div class="layui-form">
		<input id="foodId" value="${food.foodId}" style="display: none" />
		<div class="layui-form-item">
			<label class="layui-form-label">商品名称:</label>
			<div class="layui-input-block">
				<input id="inputFoodName" value="${food.foodName}" type="text"
					required lay-verify="required" placeholder="请输入商品名称"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">菜系名称:</label>
			<div class="layui-input-block">
				<select id="inputClassificationId" v-model="selected">
					<option v-for="option in options"
						v-bind:value="option.classificationId">{{option.classificationName}}</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">计量单位名称:</label>
			<div class="layui-input-block">
				<select id="inputUnitId" v-model="selected">
					<option v-for="option in options" v-bind:value="option.unitId">{{option.unitName}}</option>
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">生产价格: </label>
			<div class="layui-input-block">
				<input id="inputProductPrice" value="${food.productPrice}"
					type="text" disabled="disabled"
					autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">销售价格:</label>
			<div class="layui-input-block">
				<input id="inputSellPrice" value="${food.sellPrice}" type="text"
					required lay-verify="required" placeholder="请输入销售价格"
					autocomplete="off" class="layui-input">
			</div>
		</div>
	</div>

	<div>
		<div>
			<label class="layui-form-label">原料:</label>
			<button class="layui-btn layui-btn-danger" id="chooseMaterialButton">选择原料</button>
		</div>

		<div id="foodMaterialData">
			<table class="layui-table">
				<thead>
					<tr>
						<th>序号</th>
						<th>原料</th>
						<th>数量</th>
						<th>单价</th>
						<th>单位</th>
						<th>总价</th>
						<th>操作</th>
					</tr>
				</thead>
				<tr v-for="(item ,index) in items">
					<th>{{index+1}}</th>
					<th>{{ item.materialName}}</th>
					<th>{{ item.materialQuantity}}</th>
					<th>{{ item.materialPrice}}</th>
					<th>{{ item.unitName}}</th>
					<th>{{ item.totalPrice}}</th>
					<th><button class="layui-btn layui-btn-sm"
							v-on:click="onclick(item,index)">删除</button></th>

				</tr>
			</table>
		</div>
	</div>



	<script type="text/javascript" src="<%=basePath%>css/layui/layui.js"></script>
	<script>
		layui.use('form', function() {

		});
	</script>
</body>
</html>